<template>
	<view class="notice-index">
		<!-- 返回按钮 -->
		<u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top>
		<view class="button-group">
			<block v-for="(res, index) in classifyList" :key="index">
				<view :class="`button ${select_status == index ? 'active' : ''}`" @click="select(index)">
					<view class="button-text">{{ res.catName }}</view>
				</view>
			</block>
		</view>
		<u-empty v-if="isNotNull" mode="news" icon="/static/images/common/news.png" text="公告为空" textSize="20"
			width="220" height="220"></u-empty>
		<view class="detail-content">
			<block v-for="(res, index) in list" :key="index">
				<view class="line" @click="navigateDetail(res.id)">
					<view class="line-left">
						<image class="image" :src="res.img" mode="widthFix"></image>
						<!-- <image class="image" src="/static/images/common/wechat.png" mode="widthFix"></image> -->
						<view class="left-content">
							<view class="line-title">{{ res.title }}</view>
							<view class="line-date">发布日期:&ensp;&ensp;{{ res.date }}</view>
						</view>
					</view>
					<view class="line-right">
						<image class="in" src="/static/images/common/in.png"></image>
					</view>
				</view>
				<view class="line-bottom"></view>
			</block>
		</view>
		<u-loadmore v-if="list.length != 0" :status="loading.status" :loading-text="loading.loadingText"
			:loadmore-text="loading.loadmoreText" :nomore-text="loading.nomoreText" :icon="true" loadingIcon="circle"
			:line="true" marginTop="30" marginBottom="20" iconColor="#cecece" color="#cecece" @loadmore="lower" />
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		Reputation_log,
		ArticlesFENLEI,
		alist
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 返回顶部按钮 */
				scrollTop: 0, // 返回顶部滚动值
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: '600',
					color: '#FFFFFF'
				}, // 滚动内层样式
				custom: {
					background: '#CB8F58'
				}, // 滚动外层样式

				/* 加载更多 */
				loading: {
					status: 'loadmore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '上拉或点击加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 选择按钮 */
				select_status: 0, // 选择收款码设置

				/* 公告列表 */
				pages: 1, // 页数
				total_page: '', // 总页数
				amount: 10, // 条数
				total_amount: '', // 订单总数
				ID: '', // 类型ID
				list: [], // 数据列表
				classifyList: [], // 分类列表
				isNotNull: false, // 是否为空
			};
		},
		onLoad() {
			this.getClassify();
		},
		onShow() {

		},
		/* 返回顶部 */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* 加载更多 */
		onReachBottom() {
			this.lower(); // 获取更多信息
		},
		methods: {

			/* 获取分类 */
			getClassify() {
				const that = this;
				ArticlesFENLEI().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.classifyList = result;
						if (that.classifyList.length === 0) {
							that.isNotNull = true;
						} else {
							that.ID = result[0].catId;
							this.getDetail();
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 选择设置 */
			select(id) {
				this.loading.status = 'loadmore';
				this.ID = this.classifyList[id].catId;
				this.select_status = id;
				this.getDetail();
			},

			/* 公告明细 */
			getDetail() {
				const that = this;
				that.pages = 1;
				const params = {
					catId: that.ID,
					page: that.pages,
					limit: that.amount
				};
				alist(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.total_page = result.last_page;
						that.total_amount = result.total;
						that.list = result.data.map(item => {
							return {
								id: item.articleId,
								title: item.articleTitle,
								date: item.createTime,
								img: item.logo
							};
						});
						if (that.list.length == 0) {
							this.loading.status = 'nomore';
						} else if (that.list.length == that.total_amount) {
							that.loading.status = 'nomore';
						};;
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 加载下一页数据 */
			getMoreDetail() {
				const that = this;
				const params = {
					catId: that.ID,
					page: that.pages,
					limit: that.amount
				};
				alist(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.total_page = result.last_page;
						let moreList = result.data.map(item => {
							return {
								id: item.articleId,
								title: item.articleTitle,
								date: item.createTime,
								img: item.logo
							};
						});
						for (let i = 0; i < moreList.length; i++) {
							that.list.push(moreList[i]);
						};
						if (that.pages <= that.total_page) {
							this.loading.status = 'loadmore';
						} else {
							setTimeout(() => {
								this.loading.status = 'nomore';
							}, 700);
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 账单详情向下滚动 */
			lower(e) {
				const that = this;
				if (that.pages <= that.total_page && that.list.length != that.total_amount) {
					this.loading.status = 'loading';
					setTimeout(() => {
						that.pages = that.pages + 1;
						this.getMoreDetail();
					}, 700);
				} else {
					this.loading.status = 'nomore';
				};
			},

			/* 检查是否加载到底了 */
			checkRenchBottom() {
				if (this.scrollTop === 0) {
					this.loading.status = 'nomore';
				} else {
					this.loading.status = 'loadmore';
				};
			},

			/* 获取更多内容 */
			getMore() {
				this.loading.status = 'loading';
				setTimeout(() => {
					this.number = 20;
					this.loading.status = 'nomore';
				}, 1000);
			},

			/* 跳转至公告详情页面 */
			navigateDetail(option) {
				uni.navigateTo({
					url: '/pages/notice/noticeDetail/noticeDetail?id=' + option + '&mode=2',
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/notice.scss";
</style>
